<template>
  <!-- 退款 -->
  <el-dialog title="套餐详情" :visible="value" width="900px" custom-class="dialog-box" @close="onClose" @open="onOpen" :close-on-click-modal="false" :append-to-body="true">
    <el-row class="return-row">
        <el-col class="return-title" :span="24">
            <table class="grid-table">
            <thead>
                <tr>
                  <th style="text-align:center;" colspan="5">{{packageName}}</th>
                </tr>
                <tr>
                <th>名称</th>
                <th>分类</th>
                <th>项目</th>
                <th>剩余次数</th>
                <th>使用状态</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in tcItemList" :key="index">
                <template v-for="(item2,index2) in item">
                    <td v-if="item2.row>0" :key="index2" :class="{'grid-gray':item2.isStyle}" :rowspan="item2.row">
                        {{item2.name}}
                        <template v-if="item2.isPrice">（￥{{item2.packagePrice}}）</template>
                    </td>
                    <td v-else :key="index2">{{item2.name}} </td>
                    <!-- <td  v-if="item2.type !=null && item2.type !=undefined" :key="'100022'+index2">{{item2.type}}</td> -->
                    <td v-if="item2.surplusNumber !=null && item2.surplusNumber !=undefined" :class="{'grid-gray':item2.surplusNumber<1}" :key="'100021'+index2">{{item2.surplusNumber?item2.surplusNumber:0}}</td>
                    <td  v-if="item2.usedNumber !=null && item2.usedNumber !=undefined" :class="{'grid-gray':item2.usedNumber>=item2.surplusNumber}" :key="'100023'+index2">{{item2.usedNumber>=item2.surplusNumber?'已使用':'未使用完'}}</td>
                </template>
                </tr>
            </tbody>
            </table>
        </el-col>
     </el-row>
  </el-dialog>
</template>
<script>
import enumArr from "../../_enum/enum";
import Valid from "@/_js/validate.js";
export default {
  props: ["value","sourceId","source"],
  data() {
    return {
      form: {
        desc: "",
        payWay:7,
      },
      btnLoading:false,
      rules: {
        desc: [
          { required: true, message: "请输入退费原因", trigger: "blur" }
        ],
        payWay: [{ required: true, message: "请选择退费方式", trigger: "blur" }],
      },
      returnPayTypeList:enumArr.returnPayArr,
      tcItemList:[],
      packageName:''
    };
  },
  mounted() {
      this.onOpen();
  },
  methods: {
    onSubmit() {
      let orderItems=[];
      if(this.checkItemList.length>0){
         this.checkItemList.map(it=>{
           orderItems.push({sourceId:it.id,refundAmount:it.actualAmount});
         })
      }
      this.$api.refundOrder({orderId:this.orderId,...this.form,orderItems:JSON.stringify(orderItems)}).then(res=>{
           if(res.executed){
             this.$message.success(res.message);
             this.$router.push({path: '/page/chargeIndexV2'});
             this.$emit("value",false);
           }else{
             this.$message.error(res.message);
           }
      })
    },
    onOpen() {
       this.$api.getPackageUseDetail({source:this.source,sourceId:this.sourceId}).then(res=>{
           if(res.executed){
            if(res.dataBody){
              const { packageItemList, packageName } =res.dataBody;
              const fn1 = function() {};
              let list = [];
              let tdList = [];
              //循环3次
              const fn3 = function(arr) {
                arr.forEach(ele => {
                  let j = {
                    row: 1,
                    name: ele.name,
                    isStyle:ele.surplusNumber<1?true:false,
                    isPrice:true,
                    packagePrice: ele.unitPrice,
                    // type:ele.type,
                    usedNumber:ele.usedNumber,
                    surplusNumber: ele.surplusNumber?ele.surplusNumber:0
                  };
                  tdList.push(j);
                  list.push(tdList);
                  tdList = [];
                });
              };
              //循环2次
              const fn2 = function(arr,obj) {
                arr.forEach(ele => {
                  let j = {
                    row: ele.itemList.length,
                    name: ele.typeName
                  };
                  obj.row += j.row;
                  tdList.push(j);
                  fn3(ele.itemList);
                });
              };
              packageItemList.forEach(ele => {
                let j = {
                  row: 0,
                  name: ele.packageName,
                  isPrice:true,
                  packagePrice: ele.packagePrice
                };
                tdList.push(j);
                fn2(ele.typeList, j);
              });
              this.tcItemList = list;
              this.packageName=packageName;
            }
           }
       })
    },
    onClose() {
      this.$emit("input", false);
    },
  }
};
</script>
<style lang="scss" scoped>
.return-row{
  margin: 10px 0;
  .return-title{
    color: #000;
    font-size:15px;
  }
  /deep/.el-col{
    line-height: 35px;
  }
}
.grid-table tr td {
    color: #000;
}
.grid-gray{
  color: #999!important;
}
</style>
